<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
-->
<template>
  <div v-loading="mainLoading" class="wx-voice-div" @click="outTime ? '' : playVoice(objData)">
    <i v-if="!outTime" :class="objData.amrPlaying != true ? 'icon-yuyin' : 'icon-playing1'">
      <span v-if="objData.amrDuration" class="amr-duration">{{ objData.amrDuration }}"</span>
    </i>
    <i v-if="outTime" class="el-icon-time">
      <span class="amr-duration">该语音已过期</span>
    </i>
    <div v-if="objData.repContent"><ElTag type="success" size="mini">语音识别</ElTag>{{ objData.repContent }}</div>
  </div>
</template>

<script>
  import { getTempMaterialOther, getMaterialOther } from '@/api/mp/wx-material'
  const BenzAMRRecorder = require('benz-amr-recorder')

  export default {
    name: 'WxVoicePlayer',
    props: {
      objData: {
        type: Object
      }
    },
    data() {
      return {
        outTime: false,
        mainLoading: false
      }
    },
    computed: {},
    created() {
      this.outTime =
        this.objData.type === '1' &&
        parseInt(new Date().getTime() - new Date(this.objData.createTime).getTime()) >= 259200000
    },
    mounted() {},
    methods: {
      amrPlay(amr, val) {
        this.$set(val, 'amrPlaying', true)
        amr.play()
      },
      amrStop(amr, val) {
        this.$set(val, 'amrPlaying', false)
        amr.stop()
      },
      playVoice(val) {
        const amr = val.amr
        if (amr === undefined) {
          if (`${val.type}` === '2') {
            this.getMaterialOther(val.repMediaId, val.repName, val.appId).then(repUrl => {
              this.$set(val, 'repUrl', repUrl)
              this.handleAudio(val)
            })
          } else if (`${val.type}` === '1') {
            this.getTempMaterialOther(val.repMediaId, val.repName, val.appId).then(repUrl => {
              this.$set(val, 'repUrl', repUrl)
              this.handleAudio(val)
            })
          }
        } else {
          if (amr.isPlaying()) {
            this.amrStop(amr, val)
          } else {
            this.amrPlay(amr, val)
          }
        }
      },
      async getTempMaterialOther(repMediaId, fileName, appId) {
        let url
        this.mainLoading = true
        await getTempMaterialOther({
          mediaId: repMediaId,
          fileName,
          appId
        })
          .then(response => {
            this.mainLoading = false
            url = window.URL.createObjectURL(new Blob([response.data]))
          })
          .catch(() => {
            this.mainLoading = false
          })
        return url
      },
      async getMaterialOther(repMediaId, fileName, appId) {
        let url
        this.mainLoading = true
        await getMaterialOther({
          mediaId: repMediaId,
          fileName,
          appId
        })
          .then(response => {
            this.mainLoading = false
            url = window.URL.createObjectURL(new Blob([response.data]))
          })
          .catch(() => {
            this.mainLoading = false
          })
        return url
      },
      handleAudio(val) {
        this.$set(val, 'amr', new BenzAMRRecorder())
        const amr = val.amr
        amr.initWithUrl(val.repUrl).then(() => {
          this.amrPlay(amr, val)
          this.$set(val, 'amrDuration', amr.getDuration())
        })
        amr.onEnded(() => {
          this.$set(val, 'amrPlaying', false) // 播放完了
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wx-voice-div {
    padding: 5px;
    background-color: #eaeaea;
    border-radius: 10px;
  }

  .amr-duration {
    margin-left: 5px;
    font-size: 11px;
  }
</style>
